import { useState, useEffect, useRef } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import FormatPainter from "./FormatPainter/FormatPainter";
import TurndownService from "turndown";
import showdown from "showdown";
import { FaMarkdown } from "react-icons/fa";
import styles from './Editor.module.css';

// 自定义工具栏配置
const modules = {
  toolbar: {
    container: [
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      ["bold", "italic", "underline", "strike"],
      [{ list: "ordered" }, { list: "bullet" }],
      [{ color: [] }, { background: [] }],
      [{ align: [] }],
      [{ size: ["small", false, "large", "huge"] }],
      [{ indent: "-1" }, { indent: "+1" }],
      ["link", "image"],
      ["clean"],
      ["undo", "redo"],
    ],
  },
  history: {
    delay: 1000,
    maxStack: 100,
    userOnly: true,
  },
};

// 编辑器格式配置
const formats = [
  "header",
  "bold",
  "italic",
  "underline",
  "strike",
  "list",
  "bullet",
  "color",
  "background",
  "align",
  "size",
  "indent",
  "link",
  "image",
];


const Editor = () => {
  const [content, setContent] = useState("");
  const [markdownContent, setMarkdownContent] = useState("");
  const [isMarkdownView, setIsMarkdownView] = useState(false);
  const quillRef = useRef(null);
  const [quill, setQuill] = useState(null);

  // 初始化转换器
  const turndownService = new TurndownService();
  const converter = new showdown.Converter();

  // 在内容变化时更新 Markdown
  useEffect(() => {
    if (content) {
      const markdown = turndownService.turndown(content);
      setMarkdownContent(markdown);
    }
  }, [content]);

  const handleChange = (value) => {
    setContent(value);
  };

  const handleMarkdownChange = (e) => {
    setMarkdownContent(e.target.value);
  };

  //切换markdown视图
  const toggleMarkdownView = () => {
    if (!isMarkdownView) {
      setIsMarkdownView(true);
    } else {
      const html = converter.makeHtml(markdownContent);
      setContent(html);
      setIsMarkdownView(false);
    }
  };

  useEffect(() => {
    if (quillRef.current) {
      setQuill(quillRef.current.getEditor()); // 获取 Quill 实例
    }
  }, [quillRef]);


  return (
      <div className={styles.editorContainer}>
        <div className={styles.customToolbar}>
          <FormatPainter quill={quill} />
          <button
            className={`${styles.markdownBtn} ${isMarkdownView ? styles.active : ''}`}
            onClick={toggleMarkdownView}
            title="Markdown 模式"
          >
            <FaMarkdown /> Markdown
          </button>
        </div>

      {!isMarkdownView ? (
        <ReactQuill
          ref={quillRef}
          theme="snow"
          value={content}
          onChange={handleChange}
          modules={modules}
          formats={formats}
          placeholder="开始编写文档..."
        />
      ) : (
        <div className={styles.markdownEditor}>
          <textarea
            value={markdownContent}
            onChange={handleMarkdownChange}
            placeholder="Markdown 内容..."
            className={styles.markdownTextarea}
          />
        </div>
      )}
    </div>
  );
};

export default Editor;
